<script setup lang="ts">
import type { EditJsonOptions } from './index'
import VueJsonPretty from 'vue-json-pretty'
import 'vue-json-pretty/lib/styles.css'

const props = withDefaults(defineProps<EditJsonOptions>(), {
  collapsedNodeLength: Infinity,
  deep: Infinity,
  showLength: false,
  showLine: true,
  showLineNumber: false,
  showIcon: false,
  showDoubleQuotes: true,
  virtual: false,
  height: 400,
  containerHeight: 'auto',
  itemHeight: 20,
  rootPath: 'root',
  selectableType: undefined,
  showSelectController: false,
  selectOnClickNode: true,
  highlightSelectedNode: true,
  collapsedOnClickBrackets: true,
  editable: false,
  editableTrigger: 'click',
})
const isDark = useDark()
const jsonData = defineModel<any>()
</script>

<template>
  <el-scrollbar :height="props.containerHeight">
    <VueJsonPretty
      v-bind="{
        ...props,
        theme: isDark ? 'dark' : 'light',
      }" v-model:data="jsonData"
    />
  </el-scrollbar>
</template>

<style scoped></style>
